<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="apple-mobile-web-app-title" content="我的SFC系统报告2020">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no, email=no">
    <title>SFC系统——年度报告</title>
    <!-- 1.导入fullpage插件,fullpage基于jq,所以要导入jq -->
    <link rel="stylesheet" href="css/jquery_fullpages.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 2.自创建页面结构 -->
    <div class="pageAll">
        <!-- 这里的section命名是根据官方提供插件规则的命名 -->
        <div class="section page-1">
            <div class="pageAnimate pageAnimate1">
                <div class="title_header">
                    <h1 class="titleh1"><span class="mainText">2020</span>SFC系统</h1>
                    <!-- <div class="titleImg">
                        <img src="images/time2.jpg" alt="">
                    </div> -->
                    <div class="rotateLi">
                        <ul>
                            <li></li>
                            <li><span></span></li>
                            <li><span></span></li>
                            <li><span><span></span></span></li>
                            <li><span></span></li>
                            <li><span></span></li>
                            <li><span><span></li>
                            <li><span></span></li>
                            <li><span></span></li>
                        </ul>
                    </div>
                    
                    <div class="userbg">
                        <div class="userMess">130612
                        </div>
                        <div><img src="images/1.png" alt=""></div>
                    </div>
                </div>
                <a class="button lookBtn">
                    <span>立即<br>查看</span>
                </a>
                <div class="square">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="stars">
                    <span></span><span></span>
                    <span></span><span></span>
                    <span></span><span></span>
                    <span></span><span></span>
                    <span></span><span></span>
                    <span></span><span></span>
                    <span></span><span></span>
                    <span></span><span></span>
                    <span></span><span></span>
                    <span></span><span></span>
                </div>
            </div>
        </div>

        <!-- pages2 -->
        <div class="section section2">
            <div class="pageAnimate pageAnimate2">
                <div class="box">
                    <div class="bounceInRight titleImg vatilText vatilText1">
                        <h2>嗨，你好</h2>
                        <h2 id="fday">2020.02.11</h2>
                    </div>
                    <div class="vatilImg vatilImg1">
                        <img src="images/pic4.jpg" alt="">
                    </div>
                    <div class="content content1">
                        <p><span id="firstDay">2020.02.11 14:30:50</span>我们第一次相遇</p>
                        <p><span>XXXX</span>是你执行的第一次操作</p>
                        <p>一转眼已经<span id="totalDay">3233</span>天了</p>
                    </div>
                </div>
                <div class="square">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- pages3 -->
        <div class="section">
            <div class="pageAnimate pageAnimate3">
                <div class="vatilText vatilText2">
                    <h2>最喜欢</h2>
                    <h2 class="timeMost">14：00-17:00</h2>
                </div>
                <div class="vatilImg vatilImg2">
                    <img src="images/pic7.png" alt="">
                </div>
                <div class="content content2">
                    <p><span class="timeMost">14：00-17:00</span>是一个特殊的时间段</p>
                    <p>你经常在<span class="timeMost">14：00-17:00</span>执行操作</p>
                    <p>最常用的是<span>XXXX</span></p>
                </div>
                <div class="square">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- pages4 -->
        <div class="section">
            <div class="pageAnimate pageAnimate4">
                <div class="vatilText vatilText3">
                    <h2><span class="totalDay">9914</span>次操作</h2>
                    <h2><span>XXXX</span>个小时</h2>
                </div>
                <div class="vatilImg vatilImg3">
                    <img src="images/pic7.jpeg" alt="">
                </div>
                <div class="content content3">
                    <p>在今年相处<span>XXXX</span>小时里</p>
                    <p>你一共执行了<span class="totalDay">9914</span>次操作</p>
                    <p>相信有SFC系统的日子里</p>
                    <p>每一次工作都很愉快！</p>
                </div>
                <div class="square">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- pages5 -->
        <div class="section">
            <div class="pageAnimate pageAnimate5">
                <div class="vatilText vatilText2">
                    <h2>我的最爱</h2>
                    <h2><span class="mostBrowse">569</span>次操作</h2>
                </div>
                <div class="vatilImg vatilImg2">
                    <img src="images/zk1.jpg" alt="">
                </div>
                <div class="content content2">
                    <p>你执行最多是<span class="mostList">XXXX</span></p>
                    <p>一共执行了<span class="mostBrowse">569</span>次</p>
                    <p>我想<span class="mostList">XXXX</span></p>
                    <p>一定和你有着密切联系~</p>
                </div>
                <div class="square">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- pages6 -->
        <div class="section">
            <div class="pageAnimate pageAnimate6">
                <div class="vatilText vatilText3">
                    <h2>达到<span class="userProportion">70.59%</span></h2>
                    <h2>排名<span class="userRank">Top3</span></h2>
                </div>
                <div class="vatilImg vatilImg3">
                    <img src="images/zk2.jpg" alt="">
                </div>
                <div class="content content3">
                    <p>你对SFC系统的偏爱超过<span class="userProportion">70.59%</span>的用户</p>
                    <p>系统使用率排名<span class="userRank">3</span></p>
                    <p>相信有SFC系统的日子</p>
                    <p>每一天都会很充实~</p>
                </div>
                <div class="square">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- pages7 -->
        <div class="section">
            <div class="pageAnimate pageAnimate7">
                <div class="vatilText vatilText2">
                    <h2>早晨<span class="early">08：02：27</span></h2>
                </div>
                <div class="vatilImg vatilImg2">
                    <img src="images/pic8.jpg" alt="">
                </div>
                <div class="content content2">
                    <p><span class="early2">2020.08.23</span>是特殊的一天</p>
                    <p>这一天，我们从<span class="early">08：02：27</span>开始见面</p>
                    <p>元气满满的早晨，开启美好的一天！</p>
                </div>
                <div class="square">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- pages8 -->
        <div class="section">
            <div class="pageAnimate pageAnimate8">
                <div class="vatilText vatilText3">
                    <h2>晚上<span class="latest">21：30：35</span></h2>
                </div>
                <div class="vatilImg vatilImg3">
                    <img src="images/pic1.jpeg" alt="">
                </div>
                <div class="content content3">
                    <p><span class="latest2">07.23</span>&nbsp;<span class="latest">21：30：35</span>点</p>
                    <p>你还在执行<span>XXXX</span>操作</p>
                    <p>你知道无论何时，我都在！</p>
                </div>
                <div class="square">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- pages9 -->
        <div class="section">
            <div class="pageAnimate pageAnimate9">
                <div class="vatilText vatilText2">
                    <h2>这一年里</h2>
                    <h2 class="lastDay">2020.12.27</h2>
                </div>
                <div class="vatilImg vatilImg2">
                    <img src="images/zk4.jpg" alt="">
                </div>
                <div class="content content2">
                    <p><span class="lastDay2">2020.12.27 14:23:56</span></p>
                    <p>是我们今年最后一次见面</p>
                    <p>2020年感谢你的陪伴</p>
                    <p>新的一年多多关照！</span>
                    </p>
                </div>
                <div class="square">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- pages10 -->
        <div class="section page-10">
            <div class="pageAnimate pageAnimate10">
                <div class="user">
                    <img src="images/avatar.jpg" alt="" class="avatar">
                    <span class="userMess">130612</span>
                </div>
                <div class="vatilText yearTop">
                    <h2>年度<span>Top10</span></h2>
                </div>
                <div class="summary">
                    <div class="left" id="summaryLeft">
                        <p>XXXXX</p>
                        <p>XXXXX</p>
                        <p>XXXXX</p>
                        <p>XXXXX</p>
                        <p>XXXXX</p>
                        <p>XXXXX</p>
                        <p>XXXXX</p>
                        <p>XXXXX</p>
                        <p>XXXXX</p>
                        <p>XXXXX</p>
                    </div>
                    <div class="right" id="summaryRight">
                        <p>1111</p>
                        <p>1111</p>
                        <p>1111</p>
                        <p>1111</p>
                        <p>1111</p>
                        <p>1111</p>
                        <p>1111</p>
                        <p>1111</p>
                        <p>1111</p>
                        <p>1111</p>
                    </div>
                </div>
                <button class="button backBtn">返回报告</button>
            </div>
            <div class="square">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="json/josnData.js"></script>
<script src="js/jquery_fullpage.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/index.js"></script>

</html>